<template>
  <div :class="styles['send-order-detail']" v-loading="loading">
    <DrawerHeader title="已发货订单详情页" hiddenClose/>
    <h4 class="ato-sub-title ato-mt-24 ato-mb-12">1、销售订单信息:</h4>
    <PackageList
        :table="table"
        :pagination="pagination"
        :loading="loading"
    />
    <h4 class="ato-sub-title ato-mt-24 ato-mb-12">2、订单拣货信息:</h4>
    <ul :class="styles['order-info']">
      <li><span>拣货单UID:</span><span>{{ state.pickUid }}</span></li>
      <li><span>拣货订单数:</span><span>{{ state.outNoCount}}</span></li>
      <li><span>批量拣货销售订单UID:</span><span>{{ state.outNos?.join('、') }}</span></li>
      <li><span>拣货人:</span><span>{{ state.picker }}</span></li>
      <li><span>拣货时间:</span><span>{{ state.pickTime }}</span></li>
      <li></li>
      <li><span>确认拣货出仓人:</span><span>{{ state.confirmPicker }}</span></li>
      <li><span>确认拣货出仓时间:</span><span>{{ state.pickConfirmTime }}</span></li>
    </ul>
    <h4 class="ato-sub-title ato-mt-24 ato-mb-12">3、订单发货信息:</h4>
    <div :class="styles['order-send-info']">
      <h4 class="ato-sub-title ato-mt-24 ato-mb-12">1) 合并发货销售订单UID:</h4>
      <ul :class="styles['order-info']">
        <li><span>合并发货销售订单UID:</span><span>{{ state.outSellNos?.join('、') }}</span></li>
      </ul>
      <h4 class="ato-sub-title ato-mt-24 ato-mb-12">2) 物流信息:</h4>
      <ul :class="styles['order-info']">
        <li><span>发货人:</span><span>{{ state.sendName }}</span></li>
        <li><span>发货时间:</span><span>{{ state.sendTime }}</span></li>
        <li><span>发货物流公司:</span><span>{{ state.logisticsCompany }}</span></li>
        <li><span>发货物流单号:</span><span>{{ state.trackingNo }}</span></li>
        <li><span>发货物流查询:</span><span :class="styles['btn-detail']" @click="goLogisticsDetail">查看详情</span></li>
      </ul>
    </div>
    <div :class="styles['btns']">
      <el-button type="primary" @click="emit('close')" size="large" style="width: 200px">返回</el-button>
    </div>
    <el-dialog
        v-model="logisticsOpen"
        :close-on-press-escape="false"
        :close-on-click-modal="false "
        :class="styles['logistics-info-dialog']"
        title="物流信息"
        width="600px"
    >
        <ul :class="styles['logistics-info']">
          <li>状态: 已签收</li>
          <li v-for="item in logisticsInfo" :key="item">{{ item }}}</li>
        </ul>
      <template #footer>
      <span :class="styles['dialog-footer']">
        <el-button type="primary" @click="logisticsOpen = false">关闭</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SendOrderDetail">
import {computed, defineEmits, onUnmounted, reactive, ref, watch} from 'vue'
import { PackageList, DrawerHeader } from '@/components'
import columnsMap from '@/components/PackageList/columns'
import {queryPickDetailApi} from '@/service/outStore'
import { sendTypeMap, orderTypeMap, outStatusMap } from '@/common/statusMap'

const emit = defineEmits(['close'])
const props = defineProps({
  cardId: String
})
const state = ref({})
// loading
const loading = ref(false)
// 表格
const table = reactive({
  columns: columnsMap.get(18),
  rows: computed(() => [state.value]),
  attrs: {
    align: 'center'
  }
})
// 物流详情弹窗
const logisticsOpen = ref(false)

// 查看物流详情按钮
const goLogisticsDetail = () => {
  logisticsOpen.value = true
}


const logisticsInfo = [
  '2023-01-15 13:38:50 阜阳市 顺丰速运 已收取快件',
  '2023-01-15 15:48:06 阜阳市 顺丰速运 已收取快件',
  '2023-01-15 16:34:35 阜阳市 快件在【阜阳临泉园区管委会营业点】完成分拣，准备发往【阜阳颍东中转场】',
  '2023-01-15 16:41:35 阜阳市 快件已发车',
  '2023-01-15 18:27:35 阜阳市 快件到达【阜阳颍东中转场】',
  '2023-01-1519:02:20 阜阳市 快件在【阜阳颍东中转场】完成分拣，准备发往【金华金东中转场】',
  '2023-01-15 21:19:35 阜阳市 快件已发车',
  '2023-01-16 14:24:56 金华市快件交给方晨东,正在派送途中(联系电话: 15167931779,顺丰已开启"安全呼叫"保护您的电话隐私请放心接听！）（主单总件数：1件）',
  '2023-01-16 14:52:51 金华市 您的快件已签收，如有疑问请电联快递员【方晨东，电话：15167931779】，感谢您使用顺丰，期待再次为您服务。（主单总件数：1件）'
]

async function getDetailState () {
  loading.value = true
  const res = await queryPickDetailApi({cardId: props.cardId})
  if (res.code === __code) {
    state.value = Object.assign(res.data, res.data.cardInfo)
  }
  loading.value = false
  console.log(res, '123123')
}

const unwatch = watch(() => props.cardId, () => {
  if(props.cardId)  getDetailState()
}, {immediate: true})

onUnmounted(() => {
  // 取消监听
  unwatch()
})

</script>

<style lang="less" src="./index.less" module="styles">
</style>
